<template>
	<view class="ucenter-page">
		<u-navbar title-size="36"  height="42" :border-bottom="false" title="意见反馈"></u-navbar>
		<view class="content">
			<view class="u-cell">
				<view class="ui-text" v-if="required">请提出您宝贵的建议…<text class="required">（必填）</text></view>
				<textarea class="ui-textarea" maxlength="200" @input="input" />
				<view class="words">{{words}}/200</view>
			</view>
			<view class="u-cell">
				<view class="upload-box">
					<u-upload :custom-btn="true" width="196" height="196">
						<view slot="addBtn" class="slot-btn">
							<image src="../../static/images/upload.png" mode="" class="upload-icon"></image>
							<view class="upload-text">上传照片</view>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="u-foot">
			<view class="u-fixed">
				<button type="default" class="btn sign-out">提交</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				required: true,
				words: 0
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			input(e) {
				this.required = false;
				this.words = e.detail.value.length
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 16rpx 32rpx;
	}

	.u-cell {
		margin-bottom: 24rpx;
		background-color: #F3F4F6;
		border-radius: 12rpx;
		padding: 32rpx;
		position: relative;

		.ui-text {
			font-size: 32rpx;
			color: #BFBFBF;
			margin-bottom: -42rpx;

			.required {
				color: #A2C833;
			}
		}

		.ui-textarea {
			height: 130rpx;
			width: 100%;
		}

		.words {
			font-size: 28rpx;
			color: #BFBFBF;
			text-align: right;
			line-height: 40rpx;
			margin-bottom: -16rpx;
		}
	}
	
	.upload-box{
		margin: -10rpx;
		.slot-btn{
			width: 192rpx;
			height: 192rpx;
			border: 2rpx dashed #D6DAE3;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 10rpx;
			
			.upload-icon{
				width: 58rpx;
				height: 52rpx;
			}
			
			.upload-text{
				font-size: 28rpx;
				color:#9C9C9C;
				margin-top: 12rpx;
			}
		}
	}
	
	
	/deep/ .u-upload .u-list-item{
		overflow:unset!important;
	}
	
	
	/deep/ .u-upload  .u-delete-icon{
		width: 40rpx;
		height: 40rpx;
		background: url(../../static/images/del.png) no-repeat center /cover!important;
		border-radius: 50%;
		right: -12rpx!important;
		top: -12rpx!important;
	}
	
	/deep/ .u-upload  .u-delete-icon .u-icon{
		display: none;
	}

	.u-foot {
		.u-fixed {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 24rpx;

			.sign-out {
				font-size: 36rpx;
				color: #fff;
				line-height: 96rpx;
				border-radius: 48rpx;
				background-color: #A2C833;
			}
		}
	}
</style>
